<template>
    <div>
        <main>
        <div class="title">
        <h1>{{article.title}}</h1>
        </div>
        <div>
            <img v-show="disabled" :src=article.image class="image">
        </div>
        <div class="description">{{article.description}}</div>
        <el-divider><i class="el-icon-collection"></i></el-divider>
        <div class="content markdown-body" v-html="article.content">
        </div>
        </main>
        <container>
            <div class="see">
                <h3>大家都在看</h3>
                <el-tag class="tag" type="success" @click="getTag(dic)"  v-for="dic in tag">{{dic.aritagcontent}}</el-tag>

            </div>
            <div class="type">
                <h3>热门分类 <i class="el-icon-loading"></i></h3>
                <el-tag class="tag" effect="dark"  @click="getType(dic)" v-for="dic in type" type="danger">{{dic.aritypecontent}}</el-tag>
            </div>
        </container>
    </div>
</template>

<script>
    import 'github-markdown-css/github-markdown.css'
    export default {
        name: "showarticle",
        data(){
            return{
                disabled:true,
                article:{
                    id:'',
                    title:'',
                    description:'',
                    image:'',
                    content:'',
                },
                type:[
                    {
                        id:'',
                        aritypecontent:''
                    }
                ],
                tag:[
                    {
                        id:'',
                        aritagcontent:''
                    }
                ],

            }
        },
        created() {
            const _this = this
            axios.get("http://localhost:8181/article/findarticlebyid/"+this.$route.query.id).then(function (resp) {
                _this.article = resp.data.data
                console.log(_this.article)
                const MarkdownIt = require('markdown-it'),
                    md = new MarkdownIt();
                _this.article.content = md.render(_this.article.content)
                if (_this.article.image === ""){
                    _this.disabled = false
                }

            })
            axios.get("http://localhost:8181/article/listType").then(function (resp) {
                    _this.type = resp.data.data;
            });
            axios.get("http://localhost:8181/article/listTag").then(function (resp) {
                _this.tag = resp.data.data;
            });
        },
        methods:{
            getTag(dic){
                console.log(dic.aritagcontent)
                this.$router.push({
                    path: '/listByTagOrType',
                    query: {
                        id: dic.id
                    }
                })
            },
            getType(dic){
                console.log(dic.aritypecontent)
                this.$router.push({
                    path: '/listByTagOrType',
                    query: {
                        id: dic.id
                    }
                })
            },
        }

    }
</script>

<style scoped>
    main{
        width: 700px;
        height: 90%;
        margin-top: 20px;
        margin-left: 100px;
    }
    .title{
        height: 25%;
        line-height:40px;
        text-align: left;
        margin-left: 20px;
        font-family:"Microsoft YaHei" !important;
        font-size:18px !important;
    }
    .image{
        margin-top: 20px;
        width: 100%;
        height: 300px;
    }
    .description{
        margin-top: 20px;
        text-align: left;
        margin-left: 20px;
        height:100px;

    }

    container{
        position: absolute;
        top:140px;
        right: 150px;
        width: 200px;
        height: 300px;

    }
    .see{
        width: 200px;
        height: 150px;
        background-color: rgba(247, 243, 248,0.1);
        border:1px solid rgba(1, 30, 64, 0.63);
        box-shadow: 5px 10px 10px -10px rgb(74, 131, 131);
    }
    .see h3{
        height:20px;
        line-height:20px;
        text-align: left;
        margin-left: 20px;
        font-family:"Microsoft YaHei" !important;
        font-size:16px !important;
    }
    .see .tag{
        cursor:pointer;
        margin: 1px;
    }
    .type {
        margin-top: 20px;
        width: 200px;
        height: 150px;
        background-color: rgba(247, 243, 248,0.1);
        border:1px solid rgba(1, 30, 64, 0.63);
        box-shadow: 5px 10px 10px -10px rgb(74, 131, 131);
    }
    .type h3{
        height:20px;
        line-height:20px;
        text-align: left;
        margin-left: 20px;
        font-family:"Microsoft YaHei" !important;
        font-size:16px !important;
    }
    .type .tag{
        cursor:pointer;
        margin: 1px;
    }

</style>